<template>
	<view>
		<view class="fi">
			<u-search placeholder="请输入搜索关键词" height="70rpx" :show-action="true" action-text="搜索" :animation="true"
				@change="finds" v-model="names"></u-search>
		</view>
		<view class="fi2">
			<view class="fi2-1">
				<text>热门搜索:</text>
			</view>
			<view class="fi2-2">
				<view class="fi2-3" v-for="item in fdList" @click="go(item)">{{item}}</view>
			</view>
		</view>
		<view class="fi3">
			<view class="fi3-1" v-for="item in list">
				<view>
					<image :src="item.goodImg"></image>
				</view>
				<view>
					<view class="fi3-2">
						{{item.goodName}}
					</view>
					<view class="fi3-3">
						<view class="fi3-4">
							{{item.goodPrice}}元
						</view>
						<view class="fi3-5">
							已售:{{item.goodSold}}件
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="status"></uni-load-more>
	</view>
</template>

<script>
	import {
		apiGoods2,
		apiGoods

	} from '../../api/mock';
	export default {
		data() {
			return {
				fdList: ['母婴', '面霜', '图书'],
				p: 1,
				num: 6,
				name: null,
				list: [],
				status: 'loading',
				names: "",
				currentTab: 0,
			}
		},
		onLoad() {
			this.getGoods();

		},
		onReachBottom() {
			this.p++;
			this.status = 'loading';
			let tabname = this.currentTab == 0 ? '全部' : this.fdList[this.currentTab];
			apiGoods(this.p, this.num, tabname).then((res) => {
				console.log('是否加载中');
				console.log(res);
				this.list = [...this.list, ...res];
				// this.list = [new Set(this.list)];
				if (res.length == 0) {
					this.status = "no-more";
				};
			}).catch((err) => {
				console.log(err);
			})
		},
		methods: {
			getGoods() {
				this.list = [];
				this.name = "全部";
				apiGoods2(this.p, this.num, this.name).then((resp) => {
					console.log(resp);
					this.list = resp;
				}).catch((e) => {
					console.log(e);
				})
			},
			finds() {
				this.list = [];
				this.status = 'loading';
				console.log(this.names);
				apiGoods2(this.p, this.num, this.names).then((res) => {
					console.log('是否加载中');
					console.log(res);
					this.list = [...this.list, ...res];
					this.status = 'no-more';
					if (this.names == "") {
						this.p = 1;
						this.getGoods();
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			go(e) {
				console.log(e);
				this.list = [];
				this.name = e;
				this.p = 1;
				apiGoods(this.p, this.num, this.name).then((resp) => {
					console.log(resp);
					this.list = resp;
					this.status = "no-more";
				}).catch((e) => {
					console.log(e);
				})
			}
		}
	}
</script>

<style>
	.fi {
		width: 95%;
		margin: 0 auto;
		padding-top: 2%;
	}

	.fi2 {
		width: 95%;
		margin: 0 auto;
		padding-top: 5%;
		display: flex;
	}

	.fi2-1 {
		width: 30%;
		padding-left: 1%;
		padding-top: 1%;
	}

	.fi2-1 text {
		font-size: 20px;
	}

	.fi2-2 {
		width: 70%;
		display: flex;


	}

	.fi2-3 {
		padding: 3%;
		border: 1px solid #ff5580;
		color: #ff5580;
		border-radius: 17px;
		margin-right: 3%;
	}

	.fi3 {
		width: 95%;
		margin: 0 auto;
		padding-top: 5%;
	}

	.fi3-1 {
		padding-top: 3%;
		padding-bottom: 3%;
		display: flex;
		border-bottom: 1px solid #c7c7c7;
	}

	.fi3-1 image {
		width: 100px;
		height: 100px;
	}

	.fi3-2 {

		font-size: 17px;
		color: #868686;
	}

	.fi3-3 {
		padding-top: 15%;
		padding-left: 3%;
		display: flex;
	}

	.fi3-4 {
		color: red;
	}

	.fi3-5 {
		color: #ababab;
		padding-left: 3%;
	}
</style>